<template>
  <ul>
    <li v-for="(item, index) in data" :key="index" class="cell">{{ item }}</li>
  </ul>
</template>

<script setup lang="ts">
import { Ref } from 'vue'

const data: Ref<string[]> = ref([])
for (let i = 0; i < 10; i++) {
  data.value.push(`恒瑞医药跌停，市值失守2000亿：四季度交史上最差成绩单，一季度同比依旧下滑，业绩拐点仍未出现${i}`)
}

function handleTooltip(cellChild: HTMLElement) {
  const range = document.createRange()
  range.setStart(cellChild, 0)
  range.setEnd(cellChild, cellChild.childNodes.length)
  const rangeWidth = range.getBoundingClientRect().width
  if (rangeWidth > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
    console.log(22)
  }
}

onMounted(() => {
  const cellChildCollect: NodeListOf<HTMLElement> = document.querySelectorAll('.cell')
  const cellChildList = Array.from(cellChildCollect)
  cellChildList.forEach((item: HTMLElement) => {
    handleTooltip(item)
  })
})
</script>

<style lang="less" scoped>
ul {
  width: 400px;
  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
